<template>
    <div>
        <div class="main-head has-radios flex-between container-fluid">
            <div class="title">
                <h1>{{$t('pro.public.header.totalRe')}}</h1>
            </div>
            <div>
                <div class="nav-admin">
                    <span :class="['nav-admin-1',{'n-active': navAdmin === 'Admin' }]" @click="handleNavAdmin('Admin')">Admin</span>
                    <span :class="['nav-admin-2',{'n-active': navAdmin === 'Profit' }]" @click="handleNavAdmin('Profit')">Profit Statistic</span>
                </div>
                <a-radio-group v-model="rdChecked" buttonStyle="solid" @change="handleCheckedChange" style="display: inline-block">
                    <a-spin :spinning="spinningDate" class="dsp-spin">
                        <a-radio-button
                                v-for="(value, key) in radios"
                                :key="key"
                                :value="value[0]"
                        >{{value[1]}}</a-radio-button>
                    </a-spin>
                </a-radio-group>
            </div>
        </div>

        <div class="admin">
            <div v-show="navAdmin === 'Admin'" class="content container-fluid">
                <div class="portlet">
                    <div class="tools text-right">
                        <!-- 日 期 时 间 -->
                        <a-range-picker
                                :allowClear="false"
                                :defaultValue="[$moment(datePickerDefaultValue[0], dateFormat),$moment(datePickerDefaultValue[1], dateFormat)]"
                                :format="dateFormat"
                                @change="handleDatePickerChange"
                                v-show="showDatePicker"
                                @openChange="openChange"
                        />
                    </div>
                    <div class="e-chart-box">
                        <!-- 控制显示图表 -->
                        <template v-if="false">
                            <p class="empty e-chart-empty">No statistics available for selected period</p>
                        </template>
                        <template v-else>
                            <a-spin :spinning="chartLoading">
                                <!-- 图表组件 -->
                                <e-charts @getTable="getTable" :is-admin="true" :is-up-col="true" :date-stage="date"></e-charts>

                            </a-spin>

                        </template>
                    </div>
                </div>
            </div>

            <report-list :is-admin="true" :date-stage="date" :parent-table="tableList"></report-list>
        </div>

        <!--  -->
       <!-- <div class="profit" v-show="navAdmin === 'Profit'">
            <div class="content container-fluid">
                <div class="portlet">
                    <div class="tools text-right">
                        &lt;!&ndash; 日期时间 &ndash;&gt;
                        <a-range-picker
                                :defaultValue="[$moment(datePickerDefaultValue[0], dateFormat),$moment(datePickerDefaultValue[1], dateFormat)]"
                                :format="dateFormat"
                                @change="handleDatePickerChange"
                                :showTime="{ format: 'HH:mm' }"
                                showToday
                                v-if="showDatePicker"
                        />
                        <template v-else>
                            {{period[0].format('MMMDo')}} - {{period[1].format('MMMDo')}}
                        </template>
                    </div>

                    <div class="profit-list">
                        <a-table :columns="columns"
                                 :dataSource="profitList"
                                 :pagination="false"
                                 @change="handleTableChange"
                        />
                    </div>
                </div>
            </div>
        </div>-->
    </div>
</template>

<script>
import reportList from '@/components/common/custom/ReportList'
import eCharts from '@/components/common/echarts/eCharts'

import { parseTime, getDatePeriod } from '@/utils/time'
export default {
    name: "GeneralReport",
    components: {
        reportList,
        eCharts
    },
    data() {
        return {
            navAdmin: 'Admin',
            rdChecked: 'getThisWeek',
            rdCheckedWithoutCustom: '',
            dateFormat: 'YYYY-MM-DD',
            showDatePicker: false,

            spinningDate: false,
            selectData: [],
            date: {
                time: 'getThisWeek'
            },

            tableList: [],

            chartLoading: false,

            //columns,
            profitList: []
        }
    },
    computed: {
        radios() { return new Map(this.$t('pro.public.radiosDate')) },

        // 用户需自定义日期期限时，DatePicker的默认值
        datePickerDefaultValue() {
            const firstday = this.$moment().startOf(this.rdCheckedWithoutCustom)
            const lastday = this.$moment().endOf(this.rdCheckedWithoutCustom)
            return [firstday,lastday]
        },
        // 这里处理预设日期范围（Today，This week...）期限内的第一天和最后一天
        period() {
            const firstday = this.$moment().startOf(this.rdChecked)
            const lastday = this.$moment().endOf(this.rdChecked)
            return [firstday,lastday]
        },
    },
    methods: {
        handleNavAdmin(navName = 'Admin') {
            this.navAdmin = navName
        },
        handleCheckedChange() {
            this.showDatePicker = this.rdChecked === 'getCustom';
            if (this.showDatePicker) {
                this.rdCheckedWithoutCustom = this.rdChecked
            }else {
                this.date.time = this.rdChecked;
                delete this.date.start;
                delete this.date.end;
                this.spinningDate = true;
                setTimeout(() => {
                    this.spinningDate = false
                }, 500)
            }
        },

        handleDatePickerChange(value, mode) {
            this.selectData = mode;
        },
        openChange(status) {
            this.$nextTick(() => {
                if (!status) {
                    this.spinningDate = true;
                    setTimeout(() => {
                        this.spinningDate = false;
                        this.date.time = this.rdChecked;
                        this.date.start = (this.selectData[0] || '2019.01.01') + ' 00:00:00';
                        this.date.end = (this.selectData[1] || '2019.01.01') + ' 23:59:59';
                    }, 500)
                }
            })
        },

        handleTableChange(pagination, filters, sorter) {
            console.log(pagination, filters, sorter);
        },

        getTable(v) {
            console.log(v);
            this.tableList = v

        }

    },
    watch: {
        tableList(v) {
            this.tableList = v
        }
    },
    created() {
        //this.chartsData.xAxis.data = this.dataStrList
        this.profitList = [
            {
                period: '2019-07-12',
                spend: '902.21',
                markup: '90.23%',
                spendNet: '391.39',
                profit: '341.30',
                profitRate: '49.34%',
                id:1,
                key:12,
            }
        ]
    },
    mounted() {
        this.rdCheckedWithoutCustom = this.rdChecked
    }
}
</script>

<style scoped lang="less">
.nav-admin {
    display: inline-block;padding: 8px 20px 8px 0;font-size: 1.17rem;
    span{
        color: #888;
        cursor: pointer;
    }
    .nav-admin-1 {
        margin-right: 20px;
    }
    .n-active {
        border-bottom: 2.5px solid #1da57a;
        color: #1da57a;
        font-size: 1.5rem;
    }
}
</style>
